<template>
  <MainContainer class="p-5">
    <MyQuery
      v-model:params="params"
      :options="queryOptions"
      @query="handleQuery"
      @reset="handleReset"
    ></MyQuery>
    <div class="flex">
      <el-button type="primary" @click="openDialog()">+添加</el-button>
    </div>
    <MyTable
      v-loading="loading"
      :is-show-selection="false"
      class="my-2"
      :data="list"
      :columns="columns"
    ></MyTable>
    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
    <MyFormDialog
      v-model:visible="dialogVisible"
      v-model:formData="formData"
      :title="dialogTitle"
      :options="createFormOptions"
      :loading="loading"
      @confirm="handleConfirm"
    ></MyFormDialog>
  </MainContainer>
</template>
<script setup lang="jsx">
import useCRUD from "@/composables/useCRUD.js";
import MyQuery from "@/components/MyQuery.vue";
import MainContainer from "@/components/MainContainer.vue";
import MyFormDialog from "@/components/MyFormDialog.vue";
import MyTable from "@/components/MyTable.vue";
import parseTime from "@/utils/parseTime.js";
import {
  fetchList,
  createRobotHandle,
  deleteRobotHandle,
  updateRobotHandle,
  selectById,
} from "@/api/wx-template";

const queryOptions = [
  {
    prop: "name",
    placeholder: "公众号名称",
  },
];

const createFormOptions = [
  {
    prop: "appid",
    label: "微信开发id",
    rules: {
      required: true,
      message: "必填",
    },
  },
  {
    prop: "name",
    label: "微信公众号名称",
    rules: {
      required: true,
      message: "必填",
    },
  },
  {
    prop: "secret",
    label: "微信开发secret",
    rules: {
      required: true,
      message: "必填",
    },
  },
  {
    prop: "templateId",
    label: "微信消息模板",
    rules: {
      required: true,
      message: "必填",
    },
  },
];

const columns = [
  {
    prop: "id",
    label: "编号",
  },
  {
    prop: "appid",
    label: "微信开发id",
  },
  {
    prop: "name",
    label: "微信公众号名称",
  },
  {
    prop: "secret",
    label: "微信开发secret",
  },
  {
    prop: "templateId",
    label: "微信消息模板",
  },
  {
    prop: "updateTime",
    label: "创建日期",
    formatter(row) {
      const date = new Date(row.createTime);
      return parseTime(date);
    },
  },
  {
    label: "操作",
    prop: "action",
    minWidth: 100,
    customRender(row) {
      return (
        <div>
          <el-button link onClick={() => handleDelete(row.id)}>
            删除
          </el-button>
          <el-button
            class="!text-[#707bdf]"
            link
            onClick={() => openDialog(row.id)}
          >
            编辑
          </el-button>
        </div>
      );
    },
  },
];

const crudOptions = {
  queryApi: fetchList,
  createApi: createRobotHandle,
  deleteApi: deleteRobotHandle,
  updateApi: updateRobotHandle,
  getOneApi: selectById,
};
const {
  params,
  handleQuery,
  list,
  loading,
  handleReset,
  openDialog,
  dialogVisible,
  handleDelete,
  formData,
  dialogTitle,
  total,
  handleConfirm,
} = useCRUD(crudOptions);

handleQuery();
</script>
